<template lang="pug">
  .pendant-wrapper.pos-a(:class="{'animated bounceInLeft': isShow}")
    Weather(v-if="isShowWeather")

    .pano-desc
      p.omit2 {{ getPanoDesc }}

    Pendant

</template>

<script>
// 天气
import Weather from 'Comps/Weather'
import Pendant from 'Comps/Pendant'
import { mapGetters } from 'vuex'
import { isPc } from '@/utils'
import {
  visibleWeather
} from '@/utils/krpano'

export default {
  components: {
    Weather,
    Pendant
  },
  data() {
    return {
      isShow: false
    }
  },
  created() {
    this.cartStyle = `background-image: url(${$globalconfig.URLS.API}/krpano/imgages/cart.png);`
    this.redbagStyle = `background-image: url(${$globalconfig.URLS.API}/krpano/imgages/redbag.png);`
  },
  mounted() {
    this.$nextTick(() => {
      this.isShow = true
    })
  },
  computed: {
    ...mapGetters(['panoInfo']),
    getPanoDesc() {
      if(this.panoInfo) {
        return this.panoInfo.pano_dec
      }
    },
    isShowWeather() {
      return isPc() && visibleWeather()
    },
    getCartIcon() {
      return this.cartStyle
    },
    getRedBagIcon() {
      return this.redbagStyle
    }
  }
}
</script>

<style lang="stylus" scoped>

@import '../../../assets/styles/color.styl'

.pendant-wrapper
  left: 20px
  top: 78px
  color: $white
  z-index: 19
  .weather
    position: static

  .pano-desc
    max-width: 250px
    margin-top: 10px
    color: $white
    h3
      font-size: 18px
    p
      font-size: 14px
      text-shadow: 2px -1px 2px #333

  .pendant
    position: static

  .icon-wrap
    margin-top: 27px
    $iconwidth = 30px
    .icon
      width: $iconwidth
      height: $iconwidth
      border-radius: $iconwidth
      padding: 10px
      overflow: hidden
      span
        display: block
        width: $iconwidth
        height: $iconwidth
    .cart
      margin-bottom: 24px
      background-color: rgba($theme4-color, .4)
</style>
